<template>
  <div class="card-wrap" @click="onCardClick">
    <a-card v-if="loading" :bordered="true" hoverable>
      <slot name="skeleton"></slot>
    </a-card>
    <a-card v-else :bordered="true" hoverable>
      <a-space align="start">
        <a-avatar
          v-if="icon"
          :size="24"
          style="margin-right: 8px; background-color: #626aea"
        >
          <icon-filter />
        </a-avatar>
        <a-card-meta>
          <template #title>
            <a-typography-text style="margin-right: 10px; font-size: 24px">
              {{ title }}
            </a-typography-text>
          </template>

          <template #description>
            {{ description }} <br />Priority: {{ expiresText }}
            <slot></slot>
          </template>
        </a-card-meta>
      </a-space>
      <!-- <template #actions>
        <a-switch v-if="actionType === 'switch'" v-model="open" @click.stop="onSwitchClick" />
      </template> -->
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineEmits } from 'vue';
  import { useToggle } from '@vueuse/core';

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    actionType: {
      type: String,
      default: 'switch',
    },
    defaultValue: {
      type: Boolean,
      default: false,
    },
    // closeTxt: {
    //   type: String,
    //   default: '',
    // },
    expiresText: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    showTag: {
      type: Boolean,
      default: true,
    },
    tagText: {
      type: String,
      default: '',
    },
    expires: {
      type: Boolean,
      default: false,
    },
    expiresTagText: {
      type: String,
      default: '10',
    },
  });
  const emits = defineEmits(['cardClick', 'switchClick']);

  const [open, toggle] = useToggle(props.defaultValue);
  const handleToggle = () => {
    toggle();
  };
  // const isExpires = ref(props.expires);
  // const renew = () => {
  //   isExpires.value = false;
  // };

  const onCardClick = () => {
    emits('cardClick');
  };

  const onSwitchClick = () => {
    emits('switchClick');
  };
</script>

<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 2px solid var(--color-neutral-3);
    border-radius: 4px;
    &:hover {
      transform: translateY(-4px);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;
      .arco-card-body {
        height: 100%;
        .arco-space {
          width: 100%;
          height: 100%;
          .arco-space-item {
            height: 100%;
            &:last-child {
              flex: 1;
            }
            .arco-card-meta {
              height: 100%;
              display: flex;
              flex-flow: column;
              .arco-card-meta-content {
                flex: 1;
                .arco-card-meta-description {
                  margin-top: 8px;
                  color: rgb(var(--gray-6));
                  line-height: 38px;
                  font-size: 20px;
                }
              }
              .arco-card-meta-footer {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
    :deep(.arco-card-meta-title) {
      display: flex;
      align-items: center;
      line-height: 28px;
    }
    :deep(.arco-skeleton-line) {
      &:last-child {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
</style>
